@import 'assets/stylesheets/gutenberg-base-styles';
@import 'assets/stylesheets/shared/mixins/placeholder'; // Contains the placeholder mixin
@import 'assets/stylesheets/shared/animation'; // Needed for the placeholder

// Copied from https://github.com/WordPress/gutenberg/blob/8c0c7b7267473b5c197dd3052e9707f75f4e6448/packages/edit-widgets/src/components/header/style.scss
.gutenboarding__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid $light-gray-500;
	height: $header-height;
	background: $white;
	z-index: z-index( '.block-editor-editor-skeleton__header' );

	left: 0;
	right: 0;
	// Stick the toolbar to the top, because the admin bar is not fixed on mobile.
	top: 0;
	position: sticky;

	// On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container.
	@include break-small {
		position: fixed;
		padding: $grid-size;
	}
}

.gutenboarding__header-wp-icon {
	color: var( --studio-blue-90 );
}

.gutenboarding__header-section {
	display: flex;
	align-items: center;
}

.gutenboarding__header-group {
	display: flex;
	flex-direction: column;
	margin: 10px;
	font-size: 14px;
	align-items: flex-start;
}

$padding--gutenboarding__header-domain-picker-button: 0.3em 0.5em;
.gutenboarding__header-domain-picker-button {
	padding: $padding--gutenboarding__header-domain-picker-button;
	border-radius: $radius-round-rectangle;

	&:focus,
	&:hover {
		box-shadow: 0 0 0 2px $blue-medium-focus;
		outline: 0;
	}

	&:disabled {
		opacity: 1;
		.gutenboarding__site-title {
			color: black;
		}
	}

	.gutenboarding__site-title {
		padding: 0;
	}

	> span {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	> .dashicon {
		align-self: flex-end;
	}
}

.gutenboarding__header-domain-picker-button-domain {
	&.placeholder {
		@include placeholder();
	}
}

.gutenboarding__site-title {
	padding: $padding--gutenboarding__header-domain-picker-button;
	font-weight: bold;
}
